<template>
  <div class="file-upload-container">
    <UploadFile
      action="http://localhost:5555/api/home/upload"
      :beforeUpload="beforeUpload"
      @file-uploaded="fileUploaded"
      @file-uploaded-error="fileUploadedError"
    >
      <template #loading>
        <h1>.....</h1>
      </template>

      <!-- <template #uploaded>
      <h2>SUCCESS</h2>
    </template> -->

      <template #uploaded="dataProps">
        <img :src="dataProps.uploadedData.url" style="width: 500px" />
      </template>
    </UploadFile>
  </div>
</template>

<script lang="ts">
import UploadFile from './components/uploader.vue'
import { defineComponent } from 'vue'
export default defineComponent({
  components: {
    UploadFile
  },
  setup(props, context) {
    const beforeUpload = (file: File) => {
      let isTrue = file.type === 'image/png'
      if (!isTrue) {
        alert('必须是....png图片格式')
      }
      return isTrue
    }

    const fileUploaded = (data: any) => {
      console.log(data, 'data')
    }

    const fileUploadedError = (error: any) => {
      console.log('errpr....', error)
    }

    return {
      beforeUpload,
      fileUploaded,
      fileUploadedError
    }
  }
})
</script>
